* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #f3f5f7;
}
a {
    text-decoration: none;
}
li {
    list-style-type: none;
}
.w {
    margin: 0 auto;
    width: 1200px;
}
.clearfix ::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/* 第一板块 */
.header {
    margin: 30px auto;
    width: 1200px;
    height: 42px;
   
}
/* logo */
.logo {
    float: left;
    width: 229px;
    height: 42px;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
}
/* 导航栏 */
.nav {
    float: left;
    width: 312px;
    height: 42px;
    margin-left: 38px;
}
.nav ul li {
    float: left;
}
.nav ul li a {
    float: left;
    height: 42px;
    padding: 0 15px;
    font-size: 18px;
    color: #050505;
    line-height: 42px;
}
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff;
}
/* 文本框 */
.search {
    float: left;
    margin-left: 67px;
    height: 42px;
    width: 414qpx;
    background-color: brown;
}
.search div input {
    float: left;
    width: 360px;
    height: 38px;
    border: 2px solid #00a4ff;
    border-right: 0;
    font-size: 14px;
    color: #bfbfbf;
    text-indent: 19px;
}
/* 提交按钮 */
.search div button {
    float: left;
    width: 52px;
    height: 42px;
    border: 0;
    background-image: url(images/fa-search.jpg);
}
.search div input {
    outline: none;
}
/* 信息栏 */
.user {
    float: right;
    margin-right: 30px;
    height: 42px;
    font-size: 14px;
    color: #666666;
    line-height: 42px;
}
.user img {
    vertical-align: middle;
}
/* 第二板块 */
/* 通栏盒子 */
.banner {
    height: 420px;
    background-color: #1c036c;
}
/* 版心 */
.banner .w {
    height: 420px;
    background: url(images/banner2.png) no-repeat top center;
}
/* 左侧导航栏 */
.banner .submav {
    float: left;
    width: 192px;
    height: 420px;
    background:rgba(0, 0, 0, 0.3);
}
.submav ul  {
   margin: 12px 0; 
}
.submav ul li a {
    float: left;
    width: 192px;
    text-indent: 20px;
    font-size: 14px;
    color: #ffffff;
    line-height: 44px;
    background: url(images/ahd.png) no-repeat 171px;
}
.submav ul li a:hover {
    background-color: #00b4ff;
}
/* 右导航栏 */
.course {
    float: right;
    width: 230px;
    height: 304px;
    margin-top: 51px;
    background-color: #fff;
}
.course h4 {
    float:left;
    height: 50px;
    width: 230px;
    font-size: 18px;
    color: #ffffff;
    background-color: #9bceea;
    line-height: 50px;
    text-align: center;
}
.course .courses {
    float: left;
    height: 50px;
    width: 190px;
    margin: 0 20px;
    padding-top: 15px;
    border-bottom: 2px solid #efefef;
}
.course .courses a {
    font:normal 700 16px 方正兰亭超细黑简体;
    color: #4e4e4e;
}
.course .courses p {
    font-size: 12px;
    color: #a5a5a5;
}
.course .butt a {
    float: left ;
    width: 200px;
    height: 40px;
    margin: 6px 15px;
    color: #00a4ff;
    font:normal 700 16px 微软雅黑;
    line-height: 40px;
    text-align: center;
    border: 2px solid #00a4ff;
    
}

/* 第三板块开始 */
/* 版心 */
.good {
    height: 60px;
    margin-top: 8px;
    box-shadow: 0px 3px 7px 3px rgba(0,0,0,0.1);   
}
/* 1 */
.good h3 {
    float: left;
    width: 132px;
    height: 60px;
    font-size: 16px;
    
    color: #00a4ff;
    line-height: 60px;
    text-align: center;
}
/* 2 */
.good ul li {
    float: left;
    height: 16px;
    margin: 22px 0;
    padding: 0 34px;
   border-left: 1px solid #bfbfbf;
}
.good ul li a {
    font-size: 16px;
    color: #454545;
}
/* 3 */
.good div  {
    float: right;
    height: 60px;
    line-height: 60px;
    padding: 0 27px;
}
.good div a {
    color: #00a4ff;
    font-size: 14px;
}
/* 第三模块结束 */

/* 第四模块开始 */
/* 版心 */
.box {
    height: 600px;
    margin-top: 35px;
}
/* 精品推荐部分 */
.box .box-hd {
    height: 42px; 
    width: 100%;
    
}
.box .box-hd h3 {
    float: left;
    height: 42px;
    color: #494949;
    font-size: 20px;
    font-weight: 400;
}  
.box .box-hd a {
    float: right;
    margin:10px 30px 0 0;
    font-size: 12px;
    color: #a5a5a5;
}

/* 课程部分 */
.box .box-bd{
    width: 100%;
    height: 557px;
}
.box .box-bd li {
    float: left;
    width: 230px;
    height: 271px;
    background-color: #ffffff;
    margin-right: 13px;
    margin-bottom: 15px;
}
.box .box-bd ul li img {
    width: 230px;
    height: 155px;
}
.box .box-bd ul li h3 a {
    display: inline-block;
    margin:25px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box .box-bd ul li span {
    margin-left: 25px;
    font-size: 12px;
    color: #ff7c2d;
}
.box .box-bd ul li span p {
   display: inline-block; 
   color: #999999;
}
.box .box-bd ul {
    width: 1250px;
}

/* 第四板块结束 */

/* 第五板块开始 */
.atp {
    margin-top: 40px;
    height: 435px;
    height: 43px;
    border: 2px;
}
/* 编程入门部分 */
.atp .atp-hd {
    float: left;
    width: 100%;
    height: 43px;
}
.atp .atp-hd h3 {
    margin-right: 317px;
    float: left;
    height: 43px;
    font-size: 20px;
    color: #494949;
    font-weight: 400;
}
.atp .atp-hd ul li {
    float: left;
}
.atp .atp-hd ul li a {
    display: inline-block;
    padding: 0 35px;
    height: 43px;
    line-height: 43px;
    color: #868686;
    font-size: 16px;
}
.atp .atp-hd ul li a:hover {
    color: #00a4ff;
}
.atp .atp-hd span a {
    float: right;
    height: 43px;
    color: #a5a5a5;
    font-size: 12px;   
}

/* 左侧盒子部分 */
.atp .atp-bd .left a img{
    float: left;
    width: 228px;
    height: 392px; 
}
/* 顶部盒子*/
.atp .atp-bd .top a img{
    float: right;
    width: 959px;
    height: 100px;
    background-color: lightgreen;
}
/* w230 h270 */
.atp .atp-bd .tail ul li{
    float: right;
    width: 230px;
    height: 270px;
    margin-left: 13px;
    margin-top: 23px;
   
}
/* w227 h155 */
.atp .atp-bd .tail ul li img {
    float: left;
    width: 230px;
    height: 155px;
}
.atp .atp-bd .tail ul li h4 a{
    float: left;
    margin: 25px 21px 21px 23px;
    color: #050505;
    font-size: 14px;
    font-weight: 400;
}
.atp .atp-bd .tail ul li div {
    float: left;
    color: #999999;
    font-size: 12px;
    margin-left: 25px;
}
.atp .atp-bd .tail ul li div span {
    color: #ff7c2d;
}